<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>M2MJSBind</title>

<link href="style/M2MJsDefault.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="M2MJS/M2MJSCommon/Select.js"></script>
<script type="text/javascript" src="M2MJS/M2MJSCommon/CheckBox.js"></script>

<script type="text/javascript" src="M2MJS/M2MJSBind/Form.js"></script>
<script type="text/javascript" src="M2MJS/M2MJSBind/Model.js"></script>
<script type="text/javascript" src="M2MJS/M2MJSBind/Component.js"></script>

<script type="text/javascript" src="js4test/Nationality.js"></script>
<script type="text/javascript" src="js4test/Person.js"></script>

<script type="text/javascript">
    var personForm = new Form();
    var nationalitiesSelect;
    var isMarriedCheck;

    var nationalitiesList = new Array();
    
    nationalitiesList.push(new Nationality(1, "Italian"));
    nationalitiesList.push(new Nationality(2, "German"));
    nationalitiesList.push(new Nationality(3, "Greek"));
    nationalitiesList.push(new Nationality(4, "American"));
    nationalitiesList.push(new Nationality(5, "Canadian"));
    nationalitiesList.push(new Nationality(6, "Senegal"));

    var personNationality = nationalitiesList[5];
	var person = new Person(1, "Marcello", "Athens", 39, "6/3/1971", personNationality, true);
	
	function getPerson(){
	    person = personForm.getModel().getObject();

	    alert(person.toString() + "\n" + person.nationality.id);
	}

	function init() {
	    nationalitiesSelect = new Select(document.getElementById("nationality"));
	    nationalitiesSelect.renderChoices(nationalitiesList, "id", "description");

	    isMarriedCheck = new CheckBox(document.getElementById("isMarried"));
	    
		personForm.addComponent(new Component("name", document.getElementById("pname")));
		personForm.addComponent(new Component("address", document.getElementById("paddress")));
		personForm.addComponent(new Component("age", document.getElementById("page")));
		personForm.addComponent(new Component("nationality", nationalitiesSelect));
		personForm.addComponent(new Component("isMarried", isMarriedCheck));
		
		personForm.setModel(new Model(person));
	}
	
	window.onload = init;
</script>
</head>
<body>
 
 <div>
 	<table>
 		<tr><td>Name:</td><td><input type="text" id="pname" /></td></tr>
 		<tr><td>Address:</td><td><input type="text" id="paddress" /></td></tr>
 		<tr><td>Age:</td><td><input type="text" id="page" /></td></tr>
 		<tr><td>Nationality:</td><td><select id="nationality"></select></td></tr>
 		<tr><td>Married:</td><td><input type="checkbox" id="isMarried" /></td></tr>
 		<tr><td colspan="2" style="text-align: center;"><button style="width: 100px;" onclick="getPerson()">OK</button></td></tr>
 	</table>
 </div>
</body>
</html>